<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="">
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				比邻物业
			</view>
			<view class="search">
				<input type="text" placeholder="搜索">
				<image src="../../static/search.png" mode=""></image>
			</view>
			<view class="box">
				<view class="title">
					成员分组
				</view>
				<view class="rylist">
					<uni-collapse>
						<!-- <view class="rylist1">
							<view class="rylist1-1">
								安保组
							</view>
							<view class="rylist1-2">
								3人
								<image src="/static/xzk.png" mode=""></image>
							</view>
						</view> -->
						<uni-collapse-item :title="item.title" v-for="(item,index) in list" :key="index">
							<view class="rylist2" v-for="(item1,index) in item.userlist" :key="index">
								<view class="rylist2-1">
									<image class="cc1" src="../../static/xz1.png" mode=""></image>
									<image class="cc2" :src="item1.headimgurl[0]" mode=""></image>
									<view class="">
										{{item1.personName}}
									</view>
								</view>
								<image @click="dianhuan(item1.phoneNumber)" src="../../static/ydh.png" mode=""></image>
							</view>


						</uni-collapse-item>
					</uni-collapse>


					<!-- <view class="rylist1">
						<view class="rylist1-1">
							客服组
						</view>
						<view class="rylist1-2">
							3人
							<image src="/static/yzk.png" style="width: 9rpx;height: 18rpx;" mode=""></image>
						</view>
					</view>
					<view class="rylist1">
						<view class="rylist1-1">
							维修组
						</view>
						<view class="rylist1-2">
							3人
							<image src="/static/yzk.png" style="width: 9rpx;height: 18rpx;" mode=""></image>
						</view>
					</view> -->
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				top: 0,
				communityId: '',
				list: [],
				token: '',
			}
		},
		onLoad() {
			this.communityId = uni.getStorageSync('communityId')
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 10
			this.token = uni.getStorageSync('token')
		},
		onShow() {
			var that = this
			if (this.token) {
				that.$post('wuyecenter/getuserlist', {
					communityId: this.communityId
				}, res => {
					console.log(res.data.list);
					this.list = res.data.list
				})
			} else {
				uni.showToast({
					title: '请登录！',
					icon: 'none'
				})
			}

		},
		methods: {
			dianhuan(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});
			}
		}
	}
</script>

<style lang="scss">
	.qjimg {
		width: 750rpx;
		height: 690rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.toptit {
		text-align: center;
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #ffffff;
	}

	.search {
		width: 686rpx;
		height: 100rpx;
		margin: 60rpx auto;
		background-color: #ffffff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;

		>input {
			height: 100rpx;
			width: 580rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
		}

		>image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.box {
		width: 686rpx;
		margin: 0 auto;
	}

	.title {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.rylist {
		margin-top: 10rpx;
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		overflow: hidden;
	}

	.rylist1 {
		width: 90%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
	}

	.rylist1-1 {
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #333333;
		line-height: 30rpx;
	}

	.rylist1-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
		line-height: 30rpx;

		>image {
			margin-left: 20rpx;
			width: 18rpx;
			height: 9rpx;
		}
	}

	.rylist2 {
		width: 90%;
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 26rpx;
			height: 26rpx;
		}
	}

	.rylist2-1 {
		display: flex;
		align-items: center;

		.cc1 {
			width: 15rpx;
			height: 16rpx;
			margin: 0 40rpx;
		}

		.cc2 {
			width: 63rpx;
			height: 63rpx;
			margin-right: 20rpx;
		}
	}
</style>
